Виджеты. Buttons GestureDetector

➡️Ссылка на репозиторий с кодом этого урока

Настройка дизайна Flutter кнопок

Рассмотрим способы, как указать свои стили для стандартной кнопки или как создать полностью свою кастомную кнопку.

Файл s3_button_widget.dart

class ButtonStyleExample extends StatelessWidget {  
  const ButtonStyleExample({super.key});  
  
  @override  
  Widget build(BuildContext context) {  
    return Column(  
      mainAxisAlignment: MainAxisAlignment.center,  
      children: [  
  
        ElevatedButton(  
          onPressed: () {},  
          child: Text("Заказать"),  
        ),  
  
      ],  
    );  
  }  
}

                  

Flutter предоставляет метод styleFrom, который упрощает создание стилей для кнопок

Файл s3_button_widget.dart

ElevatedButton(  
  style: ElevatedButton.styleFrom(  
    foregroundColor: Colors.white, // Цвет текста  
    backgroundColor: Colors.blue[400], // Цвет фона  
    // Внутренние отступы    
    padding: const EdgeInsets.symmetric(horizontal: 20),  
    // Радиус скругления  
    shape: RoundedRectangleBorder(  
      borderRadius: BorderRadius.circular(8),  
    ),  
  ),  
  onPressed: () {},  
  child: Text("Заказать"),  
),

                  

Неактивная кнопка

Чтобы сделать кнопку неактивной disabled, нужно в метод onPressed: передать значение null

ElevatedButton(  
  onPressed: null,  
  child: Text("Заказать"),  
),

                  

Все значения параметров стилей для кнопки

foregroundColor : Цвет содержимого кнопки (например, текст).
backgroundColor : Цвет фона кнопки.
disabledForegroundColor : Цвет содержимого кнопки в неактивном состоянии.
disabledBackgroundColor : Цвет фона кнопки в неактивном состоянии.
shadowColor : Цвет тени кнопки.

surfaceTintColor : Цвет оттенка поверхности кнопки.
iconColor : Цвет иконки внутри кнопки.
iconSize : Размер иконки в кнопке.
iconAlignment : Выравнивание иконки внутри кнопки.
disabledIconColor : Цвет иконки в неактивном состоянии.

overlayColor : Цвет наложения при взаимодействии (например, при нажатии).
elevation : Высота (поднятие) кнопки над поверхностью.
textStyle : Стиль текста кнопки (размер, шрифт, жирность и т. д.).
padding : Внутренние отступы кнопки.
minimumSize : Минимальный размер кнопки.

fixedSize : Фиксированный размер кнопки (по ширине и высоте).
maximumSize : Максимальный размер кнопки.
side : Граница кнопки (например, цвет и толщина рамки).
shape : Форма кнопки (например, скругленные углы).
enabledMouseCursor : Вид курсора при наведении на кнопку в активном состоянии.
disabledMouseCursor : Вид курсора при наведении в неактивном состоянии.

visualDensity : Плотность компоновки кнопки (размеры и отступы).
materialTapTargetSize : Размер области нажатия кнопки.
animationDuration : Длительность анимации изменения стиля кнопки.
enableFeedback : Включает/отключает тактильный отклик (vibration)

alignment : Выравнивание содержимого кнопки.
splashFactory : Фабрика эффекта нажатия (волны, всплески и т. д.).
backgroundBuilder : Настройка фона кнопки через кастомные слои.
foregroundBuilder : Настройка содержимого кнопки через кастомные слои.